<template>
	<view style="position: relative;padding-bottom:130rpx;" v-if="data">
		<view v-if="data.status==7 || data.status==8">
			<view></view>
		</view>
		<view v-else style="text-align: center;">
			<view v-if="data.status==6"></view>
			<!-- <view v-else style="color:rgb(255,65,91);padding:12rpx 0;background-color: rgb(255,200,200);">预约时间: {{data.yuyuetime}}</view> -->
		</view>
		<view style="margin:20rpx 30rpx;background-color:white;border-radius:10rpx;
		padding:20rpx 15rpx;">
			<view style="display: flex;justify-content: space-between;
			align-items: center;">
				<view style="display: flex;">
					<image :src="data.iPhoto" mode="aspectFill" style="width:125rpx;height:125rpx;border-radius:20rpx;"></image>
					<view class="u-m-l-20">
						<view class="u-font-16" style="font-weight:bold;">{{data.iName}}</view>
						<view class="u-m-t-28" style="display: flex;">
							<view style="display: flex;align-items: center;">
								<image src="../../static/qieTu/shijian.png" style="width:23rpx;height:23rpx;"
									mode="widthFix"></image>
								<view class="u-m-l-5">{{data.timeSpan}}分钟</view>
							</view>
							<view class="u-m-l-14 u-font-15" style="font-weight:bold;color:rgb(251,133,0);">￥{{data.totalPrice}}
							</view>
						</view>
					</view>
				</view>
				<view style="color:rgb(158,158,158);">X 1</view>
			</view>
			<view class="u-m-t-30" style="display: flex;justify-content: space-between;
			color:rgb(102,102,102);">
				<view>出行方式</view>
				<view>{{data.chuXing==0?'地铁/公交':'出租/滴滴'}}</view>
			</view>
			<view class="u-m-t-16" style="display: flex;justify-content: space-between;
			color:rgb(102,102,102);">
				<view>计师出行费用</view>
				<view>￥{{data.chuXingPrice}}.00</view>
			</view>
			<view class="u-m-t-16" style="display: flex;justify-content: space-between;
			color:rgb(102,102,102);">
				<view>优惠劵抵扣</view>
				<view>-￥{{data.youHuiPrice}}.00</view>
			</view>
			<view class="u-m-t-34" style="border-bottom:1rpx solid #ddd;
			transform: scale(1,0.5);"></view>
			<view class="u-m-t-20" style="display: flex;justify-content: flex-end;
			align-items: center;">
				<view class="u-m-r-15" style="font-weight: bold;">实付:</view>
				<view style="font-weight: bold;font-size:34rpx;color:rgb(251,133,0);">￥{{data.realPrice}}</view>
			</view>
		</view>
		
		<!-- 时间 -->
		<view v-if="data.status==1" class="cflex-r" style="margin:20rpx 30rpx; justify-content: space-between;align-items: center;background-color: #FFFFFF;padding: 20rpx 15rpx;border-radius: 15rpx;">
			<text>用户下单时间：</text>
			<text>{{data.addtime}}</text>
		</view>
		<view v-if="data.status==2" class="cflex-r" style="margin:20rpx 30rpx; justify-content: space-between;align-items: center;background-color: #FFFFFF;padding: 20rpx 15rpx;border-radius: 15rpx;">
			<text>接单时间：</text>
			<text>{{data.jietime}}</text>
		</view>
		<view v-if="data.status==3" class="cflex-r" style="margin:20rpx 30rpx; justify-content: space-between;align-items: center;background-color: #FFFFFF;padding: 20rpx 15rpx;border-radius: 15rpx;">
			<text>出发时间：</text>
			<text>{{data.chufatime}}</text>
		</view>
		<view v-if="data.status==4" class="cflex-r" style="margin:20rpx 30rpx; justify-content: space-between;align-items: center;background-color: #FFFFFF;padding: 20rpx 15rpx;border-radius: 15rpx;">
			<text>到达时间：</text>
			<text>{{data.daodatime}}</text>
		</view>
		<view v-if="data.status==5" class="cflex-r" style="margin:20rpx 30rpx; justify-content: space-between;align-items: center;background-color: #FFFFFF;padding: 20rpx 15rpx;border-radius: 15rpx;">
			<text>开始服务时间：</text>
			<text>{{data.starTime}}</text>
		</view>
		<view v-if="data.status==6" class="cflex-c" style="margin:20rpx 30rpx;background-color: #FFFFFF;padding: 20rpx 15rpx;border-radius: 15rpx;line-height: 50rpx;">
			<view class="cflex-r" style="justify-content: space-between;">
				<text>开始服务时间：</text>
				<text>{{data.starTime}}</text>
			</view>
			<view class="cflex-r" style="justify-content: space-between;">
				<text>结束服务时间：</text>
				<text>{{data.endtime}}</text>
			</view>
			<view class="cflex-r" style="justify-content: space-between;">
				<text>服务时长：</text>
				<text>{{totalTime}}</text>
			</view>
		</view>
		<view v-if="data.status==7" class="cflex-r" style="margin:20rpx 30rpx; justify-content: space-between;align-items: center;background-color: #FFFFFF;padding: 20rpx 15rpx;border-radius: 15rpx;">
			<text>用户取消时间：</text>
			<text>{{data.canceltime}}</text>
		</view>
		
		<!-- 以上为套餐费用 -->
		<view style="margin:20rpx 30rpx 20rpx 30rpx;background-color:white;border-radius:10rpx;
		padding:20rpx 15rpx;">
			<view style="font-weight: bold;font-size: 28rpx;">订单信息</view>
			<view class="u-m-t-28">订单编号: {{data.orderSn}}</view>
			<view class="u-m-t-28">技师姓名: {{data.wName}}</view>
			<view class="u-m-t-28">下单用户: {{data.uName}}</view>
			<view class="u-m-t-28" style="display: flex;justify-content: space-between;">
				<view>联系电话: {{data.tel}}</view>
				<view style="border:rgb(251,133,0) 1px solid;color:rgb(251,133,0);
				padding:0 12rpx;border-radius:10rpx;" @tap="telClick(data)">拨打电话</view>
			</view>
			<view class="u-m-t-28">下单地址: <text selectable="true">{{data.addressDes}}</text></view>
		</view>
		<view style="position: fixed;left: 0rpx;right: 0rpx;bottom: 0rpx;height: 118rpx;background-color: white;
		box-shadow: 0px -4rpx 8rpx #ddd;justify-content: space-between;
		padding:16rpx 30rpx 0rpx 30rpx;
		display: flex;padding-top:16rpx;font-weight: bold;" v-if="data.status==1">
			<view  style="width:330rpx;border:1px solid rgb(90,90,90);border-radius:54rpx;text-align: center;
			display: flex;align-items: center;justify-content: center;
			height:70rpx;color:rgb(112,112,112);" @tap="disagreeClick(data)">拒绝接单</view>
			<view  style="width:330rpx;border:1px solid rgb(251,133,0);border-radius:54rpx;text-align: center;
			display: flex;align-items: center;justify-content: center;background-color:rgb(251,133,0);
			height:70rpx;color:white;" @tap="agreeClick(data)">确认接单</view>
		</view>
		<view>
			<u-modal v-model="show" :content="content" show-cancel-button  @confirm="agree()" @cancel="disagree()"></u-modal>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 模态框内容
				show: false,
				content: null,
				btnStatus:null,
				// 请求参数id
				id: null,
				data:null,
				totalTime:'',
			}
		},
		onShow() {
			this.orderDetailReq();
		},
		onLoad({id}) {
			// //console.log(id);
			this.id = id;
		},
		methods:{
			// 模态框同意按钮
			agree(){
				console.log(this.id,this.btnStatus+1);
				this.$request("worker/order/changeOrderStatus",{orderId:this.id,status:this.btnStatus+1}).then(res=>{
					console.log(res);
					if(res.code==0){
						uni.navigateBack({
							delta: 2
						})
					}else {
						return
					}
				})
			},
			// 模态框取消按钮
			disagree(){},
			// 确认接单按钮
			agreeClick({id,status}){
				// //console.log(id,status);
				this.show = true;
				this.btnStatus = status;
				this.content = "确定接单吗?";
			},
			// 拒绝接单按钮
			disagreeClick({id}){
				// //console.log(id);
				this.show = true;
				this.btnStatus = 7;
				this.content = "确定拒绝接单吗?";
			},
			// 拨打电话按钮
			telClick({tel}){
				console.log(tel);
				uni.makePhoneCall({
				    phoneNumber: tel
				});
			},
			orderDetailReq(){
				this.$request("worker/order/orderDetails",{id:this.id}).then(res=>{
					console.log("status========>",res);
					this.data = res.data;
					
					// 计算服务时长
					let starTime = (new Date(res.data.daodatime)).getTime();
					let endTime = (new Date(res.data.endtime)).getTime();
					let fwTime = (endTime - starTime)/1000/60;
					let totalTime = Math.floor(fwTime);
					this.totalTime = totalTime+'分钟';
				})
			},
		}
	}
</script>

<style>
	
</style>
